/**
 * title:民生专题
 * author:LDM
 * date:2018/08/15
 */
$divideWidthRem:1rem;
$borderWidth:3px;
$borderColor:#103e72;
$tabBorderColor:#1754a4;
$tabBorderWidthLarger:8px;
$tabBorderWidthNormal:6px;
$tabBorderWidthLarger1:-4px;
$tabBorderWidthNormal1:-3px;
$borderRadiusValue:0.5rem;
$dateBg:#0a1d55;


$yellowColor: #ffff03;
$yellowColor1: #ebeb07;
$whiteColor: #ffffff;
.lht-wrap{
  width: 100%;
  height: 100%;
  background: url("../../assets/images/lht_bg.png") no-repeat center;
  background-size: cover;
  min-width: 3840px;
  min-height: 2160px;
  .lht-header{
    width: 100%;
    height: 10%;
  }
  .lht-main{
    padding: 0 $divideWidthRem $divideWidthRem;
    width: 100%;
    height: 90%;
    //边角料的css--starting
    .border-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top:0;
      left: 0;
      .border-main{
        position: relative;
        width: 100%;
        height: 100%;
        border:$borderWidth solid $borderColor;
        .tab{
          position: absolute;
          width: 8%;
          height: 6%;
        }
      }
    }
    //边角料的css--ending
    .lhtm-left{
      width: 73%;
      height: 100%;
      padding-right: $divideWidthRem;
      display: inline-block;
      position: relative;
      .tab-top-left{
        top:$tabBorderWidthNormal1;
        left:$tabBorderWidthLarger1;
        border-top:$tabBorderWidthNormal solid #1754a4;
        border-left:$tabBorderWidthLarger solid #1754a4;
      }
      .tab-top-right{
        top:$tabBorderWidthNormal1;
        right:$tabBorderWidthLarger1;
        border-top:$tabBorderWidthNormal solid #1754a4;
        border-right:$tabBorderWidthLarger solid #1754a4;
      }
      .tab-bottom-left{
        bottom:$tabBorderWidthNormal1;
        left:$tabBorderWidthLarger1;
        border-bottom:$tabBorderWidthNormal solid #1754a4;
        border-left:$tabBorderWidthLarger solid #1754a4;
      }
      .tab-bottom-right{
        bottom:$tabBorderWidthNormal1;
        right:$tabBorderWidthLarger1;
        border-bottom:$tabBorderWidthNormal solid #1754a4;
        border-right:$tabBorderWidthLarger solid #1754a4;
      }
      .register-wrap{
        width: 100%;
        height: 100%;
        .register-user-wrap{
          width: 100%;
          height: 37%;
          padding-bottom: $divideWidthRem;
          .ru-left{
            width: 40%;
            height: 100%;
            padding-right: $divideWidthRem;
            display: inline-block;
            .rul-wrap{
              width: 100%;
              height: 100%;
              padding: 2.5rem;
              position: relative;
              .rul-con{
                width: 100%;
                height: 100%;
                display: flex;
                display: -webkit-flex;
                flex-direction: column;
                .item-wrap{
                  flex:1;
                  padding: 3rem 0.5rem 1rem;
                  width: 100%;
                  text-align: center;
                  display: flex;
                  display: -webkit-flex;
                  flex-direction: row;
                  align-items: stretch;
                  flex-wrap: nowrap;
                  justify-content: space-around;
                  .item{
                    display: flex;
                    display: -webkit-flex;
                    flex-direction: row;
                    align-items: center;
                    -webkit-align-items: center;
                    justify-content: space-around;
                    -webkit-justify-content: space-around;
                    font-size: 8rem;
                    padding: 0.5rem 0.1rem;
                    background: #0d2057;
                    width: 10%;
                  }
                }
                .msg{
                  width: 100%;
                  @include px(14);
                  text-align: center;
                }
              }
            }
          }
          .ru-right{
            width: 60%;
            height: 100%;
            position: relative;
            float: right;
            padding: 2.5rem;
            .rur-con{
              width: 100%;
              height: 100%;
              display: flex;
              display: -webkit-flex;
              -webkit-flex-direction: column;
              flex-direction: column;
              .rur-header{
                width: 100%;
                display: flex;
                display: -webkit-flex;
                flex-direction: row;;
                -webkit-flex-direction: row;
                .rur-data{
                  flex: 1;
                  padding-left: 1rem;
                  .rang-date{
                    width: 100% !important;
                  }
                }
              }
              .rur-main{
                width: 100%;
                flex: 1;
                padding-top: 3%;
              }
            }
          }
        }
        .visitor-echarts-wrap{
          width: 100%;
          height: 63%;
          position: relative;
          padding: 2.5rem;
          .re-con{
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            .re-header{
              width: 100%;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;;
              -webkit-flex-direction: row;
              .re-data{
                flex: 1;
                padding-left: 1rem;
                display: flex;
                display: -webkit-flex;
                flex-direction: row;;
                -webkit-flex-direction: row;
                align-items: stretch;
                -webkit-align-items: stretch;
                .zw{
                  flex: 1;
                }
                .rang-date{
                  width: 34.5%;
                }
              }
            }
            .re-main{
              width: 100%;
              flex: 1;
              padding-top: 2rem;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: wrap;
              .re-item{
                display: inline-block;
                width: 50%;
                height: 50%;
                padding-bottom: 1rem;
                .re-item-con{
                  width: 100%;
                  height: 100%;
                  background: #1e1d44;
                  border:$borderWidth solid #1c2847;
                  padding: 0.7rem;
                }
              }
                .re-item:nth-child(2n-1){
                padding-right: 0.5rem;
              }
              .re-item:nth-child(2n){
                padding-left: 0.5rem;
              }
            }
          }
        }
      }
    }
    .lhtm-right{
      width: 27%;
      float: right;
      height: 100%;
      display: inline-block;
      position: relative;
      padding: 2.5rem 2.5rem 1.5rem;
      .tab-top-left{
        top:$tabBorderWidthLarger1;
        left:$tabBorderWidthNormal1;
        border-top:$tabBorderWidthLarger solid #1754a4;
        border-left:$tabBorderWidthNormal solid #1754a4;
      }
      .tab-top-right{
        top:$tabBorderWidthLarger1;
        right:$tabBorderWidthNormal1;
        border-top:$tabBorderWidthLarger solid #1754a4;
        border-right:$tabBorderWidthNormal solid #1754a4;
      }
      .tab-bottom-left{
        bottom:$tabBorderWidthLarger1;
        left:$tabBorderWidthNormal1;
        border-bottom:$tabBorderWidthLarger solid #1754a4;
        border-left:$tabBorderWidthNormal solid #1754a4;
      }
      .tab-bottom-right{
        bottom:$tabBorderWidthLarger1;
        right:$tabBorderWidthNormal1;
        border-bottom:$tabBorderWidthLarger solid #1754a4;
        border-right:$tabBorderWidthNormal solid #1754a4;
      }
      .lhtmr-com{
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        .lhtmr-header{
          width: 100%;
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          -webkit-flex-direction: row;
          -webkit-align-items: stretch;
          align-items: stretch;
          .lhtmr-date{
            flex: 1;
            padding-left: 1rem;
            .rang-date{
              width: 100%!important;
            }
          }
        }
        .lhtmr-main{
          width: 100%;
          flex: 1;
          .lhtmr-item{
            width: 100%;
            height: 33%;
            position: relative;
            padding-top: 1rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            .lhtmr-item-title{
              width: 100%;
              height: 4rem;
              line-height: 4rem;
              background: #181d45;
              text-align: center;
              padding: $borderWidth;
              .lhtmr-item-name{
                display: flex;
                display: -webkit-flex;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
                width: 60%;
                margin-left: 20%;
                height: 100%;
                font-size: 2rem;
                color: $whiteColor;
                border:$borderWidth solid #2e63e0;
                border-radius: $borderRadiusValue;

              }
            }
            .lhtmr-item-con{
              width: 100%;
              flex: 1;
              padding: 1rem 0;
            }
            .lhtmr-item-divide{
              position: absolute;
              background: $borderColor;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 4px
            }
            .lhtmr-item-divide-logo{
              position: absolute;
              bottom: -1px;
              width: 4%;
              height: 6px;
              background: #5588c8;
            }
            .lhtmr-item-divide-logo-left{
              left: 0;
            }
            .lhtmr-item-divide-logo-right{
              right: 0;
            }
          }
        }
      }
    }
  }
  .yellow-text{
    color: $yellowColor;
  }
  .yellow-text1{
    color: $yellowColor1;
  }
  .middle-font{
    font-size: 2em;
  }
  .white-text{
    color: $whiteColor;
  }
  .width-100{
    min-width: 100%;
    .triangle-bottomright{
      background: #221933;
    }
  }
  .width-60{
    min-width: 60%;
    .triangle-bottomright{
      background: #2a1f3b;
    }
  }
  .width-33{
    min-width: 33%;
    .triangle-bottomright{
      background: #1e1831;
    }
  }
  .width-50{
    min-width: 50%;
    .triangle-bottomright{
      background: #16132a;
    }
  }
}
//日期选择器的
.rang-date{
  height: 100% !important;
  max-width: 100% !important;
  background: $dateBg !important;
  color: $whiteColor !important;
  border: $borderWidth solid $borderColor !important;
  padding-left: 3rem !important;
  input{
    background: $dateBg!important;
    color: $whiteColor!important;
    font-size: 1.5rem  !important;
    width: 40% !important;
  }
  .el-range-separator{
    font-size: 1.5rem  !important;
    color: $whiteColor!important;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .el-range__icon,.el-icon-circle-close{
    font-size: 1.5rem !important;
  }
}
.drop-date{
  background: $dateBg !important;
  border-color: $borderColor!important;
  color: $whiteColor!important;
  .el-picker-panel__icon-btn{
    color: $whiteColor!important;
  }
  .is-left{
    border-color: $borderColor!important;
  }
  .el-date-table{
    th{
      border-color: $borderColor!important;
      color: $whiteColor!important;
    }
  }
  .in-range{
    div{
      background: $whiteColor !important;
      span{
        color: $dateBg !important;
      }
    }
  }
  .today{
    font-size: 14px !important;
    font-weight: bold !important;
  }
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color:$dateBg !important;
}
.el-popper[x-placement^=bottom] .popper__arrow{
  border-bottom-color:$borderColor!important;
}
.el-input__icon.el-range__close-icon{
  display: none!important;
}
